<template>
  <div>
    <el-dialog :visible.sync="dialogShow" :title="name"  :before-close="handleClose" width="30%">
      <div style="height:500px;overflow-x:hidden;"  v-loading="Loading" >
        <div class="dialog_input" v-for="(item, index) in dataList" :key="index">
          <el-row :gutter="20" class="mg-bottom-10">
            <el-col :span="17">
              <div class="align-center">
                <div style="flex:1;text-align:right;">企业名称：</div>
                <el-select v-model="item.supplierCustomerId">
                  <el-option
                    v-for="sonItem in companyList"
                    :key="sonItem.id"
                    :label="sonItem.name"
                    :value="sonItem.id" />
                </el-select>
                <!-- <el-input style="flex:2" v-model="item.name"></el-input> -->
              </div>
            </el-col>
            <el-col :span="1" v-if="item.id">
              <div  @click="delCustorm(item.id)" class="pointer" >
                <i class="el-icon-delete" ></i>
              </div>
            </el-col>
            <el-col :span="1" v-if="item.id" >
              <div  @click="upSenior(item.id, index)"  class="pointer">
                <i class="el-icon-edit" ></i>
              </div>
            </el-col>
            <el-col :span="2" v-else>
              <el-button size="mini" type="success"  @click="addSupplierCustomerBtn(index)" >确认</el-button>
            </el-col>
          </el-row>
        </div>
        <el-button @click="addItem(dataList)" class="mg-left-40">添加</el-button>
        <el-button @click="getList()" type="warning">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    findSupplierCustomerPageByParam,
    delSupplierCustomerById,
    updateSupplierCustomer,
    addSupplierCustomer,
  } from '../api'
  export default {
    props: {
      dialogShow: { type: Boolean, required: true, default: false },
      enterpriseId: {type: String},
      parkId: {type: String},
      name: {type: String},
      type: { type: Number, default: 1},
      companyList: {type: Array}
    },
    data() {
      return {
        dataList: [],
        Loading: true,
      }
    },
    watch:{
      enterpriseId:{
        handler(val) {
          this.getList(val, this.type)
        }
      },
      type: {
        handler(val){
          console.log('comptype', val)
          this.getList(this.enterpriseId, val)
        }
      }
    },
    mounted(){
    },
    methods: {
      // 先查出来园区内所有企业的列表
      handleClose() {
        this.$emit('update:dialogShow', false)
        this.dataList = []
      },
      // 获取当前信息列表
      getList(enterpriseId, type){
        if(!enterpriseId){
          enterpriseId = this.enterpriseId
        }
        if(!type){
          type = this.type
        }
        this.Loading = true
        const find = {
          pageNo: 0,
          pageSize: 10000,
          supplierCustomerVo: {
            enterpriseId: enterpriseId,
            enterpriseType: type
          },
        }
        findSupplierCustomerPageByParam(find).then(response => {
          console.log('hhh', response)
          this.dataList = response.records
          this.Loading = false
        })
      },
      // 删除对应高管
      delCustorm(id){
        console.log(id)
        this.$confirm('确定删除该？', '提示', {
          confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
        }).then(() => {
          delSupplierCustomerById({tSupplierCustomerId: id}).then(response => {
            if(response){
              this.$message({ type: 'success',message: '删除成功!' })
            }else{
              this.$message({ type: 'error',message: '删除失败!' })
            }
            this.getList()
          })
        }).catch(() => {})
      },
      // 添加新的
      addSupplierCustomerBtn(index){
        if(!this.dataList[index].supplierCustomerId){
          this.$message({ type: 'warning',message: '必须选择对应的企业!' })
          return
        }
        const addData = {
          enterpriseId: this.enterpriseId,
          supplierCustomerId: this.dataList[index].supplierCustomerId,
          enterpriseType: this.type
        }
        addSupplierCustomer(addData).then(response => {
          if(response){
            this.$message({ type: 'success',message: '添加成功!' })
          }else{
            this.$message({ type: 'error',message: '修改失败' })
          }
          this.getList(this.enterpriseId)
        })
      },
      // 修改对应企业
      upSenior(id, index){
        if(!this.dataList[index].supplierCustomerId){
          this.$message({ type: 'warning',message: '必须选择对应的企业!' })
          return
        }
        const upData = {
          id: id,
          enterpriseId: this.enterpriseId,
          supplierCustomerId: this.dataList[index].supplierCustomerId,
          enterpriseType: this.type
        }
        updateSupplierCustomer(upData).then(response => {
          if(response){
            this.$message({ type: 'success',message: '修改成功!' })
          }else{
            this.$message({ type: 'error',message: '修改失败' })
          }
          this.getList(this.enterpriseId)
        })
      },
       // 添加INPUT输入框
      addItem (val) {
        val.push({ supplierCustomerId: '' })  
      },
    }
  }
</script>
<style lang="scss" scoped>
::v-deep .dialog_input{
  .el-input{
    .el-input__inner{
        width: vw(260px);
    }
  }
}
.pointer{ cursor: pointer; }
</style>

